<template>
    <div class="nav">
        <van-nav-bar title="账号资料" left-text="返回" left-arrow @click-left="onClickLeft" />
        <van-cell title="修改头像" @click="showBottom" is-link style="margin-top: 10px;" />
        <!-- <van-cell-group style="margin-top: 12px;">
            <van-cell title="昵称" value="昵称" is-link />
            <van-cell title="手机号码" value="手机号码" is-link />
            <van-cell title="修改密码" is-link />
        </van-cell-group> -->
        <UploadAvatar :show="show" @closePopup="onClosePopup" />
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import UploadAvatar from '../components/UploadAvatar.vue'

const onClickLeft = () => history.back();

const show = ref(false);
const showBottom = () => {
    show.value = true;
};

const onClosePopup = () => {
    show.value = false // 收到子组件的closePopup事件后，关闭popup
}

</script>

<style lang="scss" scoped>
.nav {
    height: 100vh;
    background-color: #f0f0f0;
    color: black;
}
</style>